<template>
	<view class="page_content fullscreen-safe-area">
		<view class="common_card">
			<view class="title_row">
				<view class="common-bold-title">{{detail.devName}}</view>
				<view class="runStatus" :class="detail.onStatus == 1 ? 'run_normal' : 'run_error'">{{detail.onStatus == 1 ? '运行正常' : '运行异常'}}</view>
			</view>
			<view class="title_row">
				<view class="device_sn">设备SN：{{detail.serialNumber}}</view>
				<view class="device_sn_value" v-if="detail.totalBreakerNum > 0">在线断路器：{{detail.onBreakerNum}}/{{detail.totalBreakerNum}}</view>
			</view>
			<view class="title_row">
				<view class="device_location">安装位置：{{detail.devLocation}}</view>
				<view class="device_sn_value" style="flex-shrink: 0;" v-if="detail.totalTemperatureControllerNum > 0">温度控制器：{{detail.onTemperatureControllerNum}}/{{detail.totalTemperatureControllerNum}}</view>
			</view>
			<view class="device_lastest_time">最后在线：{{detail.onTime}}</view>
		</view>
		<cs-device-section v-for="key in componentKeys" :key="key" class="section" :sectionName="key" :rows="detail.componentList[key]" @OnTapItem="onTapItem">
		</cs-device-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:{
					componentList:{},
				}
			}
		},
		computed:{
			componentKeys(){
				return Object.keys(this.detail.componentList || {})
			}
		},
		onLoad() {
			let self = this;
			self.$progressHud.showLoading();
			self.$NetApi.getMethod('/loyu-api/app/dev/detail',{
				devId:self.$Route.query.id
			}).then(ok => {
				self.$progressHud.hideLoading();
				self.detail = ok.data;
			}, fail => {
				self.$progressHud.hideLoading();
				self.$progressHud.showToast(fail.errMsg || '网络错误');
			})
		},
		methods: {
			onTapItem(e){
				this.$Router.push({
					path:'/modules/projects/pages/componentDetail/componentDetail',
					query:{
						id:e.componentGoodsId || '',
						itemId:this.$Route.query.itemId || ''
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_content {
		width: 100%;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		row-gap: 48rpx;
	}
	.common_card{
		border-radius: 24rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 4px 0rpx rgba(0, 0, 0, 0.05);
		padding: 32rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 48rpx;
		width: calc(100% - 64rpx);
		flex-shrink: 0;
		overflow: clip;
		row-gap: 16rpx;
		
		display: flex;
		flex-direction: column;
	}
	.title_row{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.common-bold-title{
		font-family: Roboto;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.runStatus{
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		text-align: center;
	}
	.run_error{
		color: $power-color-error;
		background: rgba(239, 68, 68, 0.05);
	}
	.run_normal{
		background: #F0FDF4;
		color: $power-color-ok;
	}
	.device_sn{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #9CA3AF;
	}
	.device_sn_value{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		letter-spacing: normal;
		color: $power-color-primary;
	}
	.device_location{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.device_lastest_time{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.section{
		width: 100%;
	}
</style>
